
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="../static/css/reset.css">
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <script src="../static/layui/layui.all.js"></script>
    <script src="../static/js/jquery.min.js"></script>
<%--    <script src="service.js"></script>--%>
<%--    <link rel="stylesheet" href="service.css">--%>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1971187_8w9gbcsqbah.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1981790_zwewl19ropp.css">
</head>
<body>
<%--css部分--%>
<style>
    .body{
        width: 1920px;
        background-color: rgb(245, 245, 245);
    }
    #app{
        background-color: rgb(245, 245, 245);
        width: 1262px;
        margin: 0 auto;
    }

    /*黑色导航栏start*/
    /*left start*/
    .black-nav {
        width: 100%;
        height: 40px;
        line-height: 40px;
        background-color: #333333;
        font-size: 12px;
    }
    .black-nav .wrap{
        width: 1226px;
        margin: 0 auto;
    }
    .black-nav .wrap .black-nav-left{
        float: left;
    }
    .black-nav li{
        float: left;
        position: relative;
    }
    .black-nav a{
        color: #b0b0b0;  /*设置字体颜色用color，而不是font-color*/
        /*字体大小 .black-nav*/
        /*字体垂直居中 .black-nav*/
    }
    .black-nav a:hover{
        color: #ffffff;
    }
    .black-nav span{
        margin: 0 6px;
        color: #424242;
    }
    .download{
        width: 124px;
        height: 150px;
        background-color: white;
        position: absolute; /*不占据父元素位置，就不会撑开父元素 相对于父元素li  position: relative;*/
        /*水平居中对齐*/
        top: 40px;
        left: 50%;
        margin-left: -62px;
        /*阴影*/
        box-shadow: 0 1px 5px rgb(170, 170, 170); /*水平为0，垂直为1 模糊度5px*/
        /*设置内边距*/
        padding: 16px;
        /*避免因为内边距撑大盒子*/
        box-sizing: border-box;
        /*隐藏download*/
        display: none;
    }
    /*鼠标悬停在download上让二维码显示出来*/
    .black-nav li:hover>.download{ /*有子元素download的li*/
        display: block;
        z-index: 999;
    }
    .download>img {
        width: 90px;
        height: 90px;
    }
    .download>p{
        font-size: 14px;
        color: #333333;
        margin-top: 14px;
        line-height: 14px;
    }
    /*left end*/
    /*right start*/
    .black-nav-right{
        float: right;
    }
    .shopping-car{
        width: 120px;
        height: 40px;
        background-color: #424242;

        font-size: 14px;
        /*鼠标小手*/
        cursor: pointer;
        position: relative;
    }
    .shopping-car:hover{
        background-color: #ffffff;
        /*color: #ff6700;*/   /*shopping-car里面有a标签，而a的字体颜色是不继承的，所以需要单独设置a的悬停样式*/
        z-index: 999;
    }
    .shopping-car>a{
        margin-left: 22px;
    }
    .shopping-car:hover>a{
        color: #ff6700;
    }

    .cart{
        width: 316px;
        height: 0px;
        /*line-height: 98px;!*垂直居中*!*/
        box-sizing: border-box;
        background-color: #ffffff;
        /*绝对定位，父元素shopping-car相对定位*/
        position: absolute;
        top: 40px;
        right: 0px;
        /*设置阴影*/
        box-shadow: 0 2px 10px rgba(0,0,0,.15);
        color: #424242;
        overflow: hidden;
        transition: all 1s;
        /*这里不使用display：none是因为它不能实现过渡效果*/
    }
    /*实现过渡弹出动画*/
    /*
    1.将cart高度设置为0,溢出部分隐藏,在设置一下过渡时间
    2.悬停时再将高度设置为98px，字体垂直居中
    */
    .shopping-car:hover>.cart{
        height: 98px;
        line-height: 98px;
    }
    /*right end*/
    /*黑色导航栏end*/

    /*白色导航start*/
    .white-nav{
        width: 100%;
        height: 100px;
        line-height: 100px;  /*垂直居中*/
        background-color: white;
        position: relative;
    }
    .logo{
        float: left;
        width: 55px;
        height: 55px;
        margin-top: 22.5px;
    }

    .white-nav .wrap{
        display: flex;
        justify-content: space-between;
    }
    .white-nav .wrap>ul{
        /*margin-left: 80px;*/
        float: left;
        display: flex;
        justify-content: flex-start;
    }

    .white-nav ul>li .nav-select>ul{
        width: 100%;
        position: relative;
        display: flex;
        justify-content: left;


        /*float: left;*/
        /*内容垂直居中*/
    }
    .white-nav a{
        color: #333333;
        padding: 0 10px;
    }
    .white-nav a:hover{
        color: #ff6700;
    }
    .white-nav .box{
        margin-top: 25px;
        margin-left: 25px;
    }
    .white-nav input{
        width: 245px;
        height: 50px;
        border: 1px solid #e0e0e0;
        /*设置内边距*/
        padding: 0 10px;
        /*避免盒子被撑开*/
        box-sizing: border-box;
        /*去除外边框*/
        outline: none;
        float: left;
        border-right: none;
    }
    .white-nav input:hover{
        border-color: #b0b0b0;/*悬停边框变色*/
    }

    .white-nav button{
        width: 52px;
        height: 50px;
        border: 1px solid #e0e0e0;
        background-color: #ffffff;
        outline: none;
        float: left;
        /*设置动态变色*/
        transition: all 0.5s;
    }

    .white-nav button:hover{
        background-color: #ff6700;
        color: #ffffff;
        cursor: pointer;/*变小手*/
        border-color: #b0b0b0;/*悬停边框变色*/
    }

    /*非过渡动画*/
    .white-nav .nav-select{
        width: 100%;
        height: 229px;
        /*    height: 0px;*/
        border-top: 1px solid #e0e0e0;
        background-color: white;
        /*相对定位 white-nav：position: relative;*/
        position: absolute;

        left: 0;
        top: 100%;
        /*阴影*/
        box-shadow: 0 3px 4px rgba(0,0,0,.18);
        display: none;
        /*    !*过渡动画*!
            overflow: hidden;
            transition: all 0.5s;*/

    }
    .white-nav li:hover>.nav-select{
        display: block;
        /*    height: 229px;*/
        z-index: 999;
    }
    .nav-select ul{
        float: left;
        /*margin-left: 350px;*/
    }

    .nav-select li{
        width: 204px;
        padding: 0 12px;
        box-sizing: border-box;
    }

    .nav-select img{
        width: 160px;
        margin-top: 25px;

    }

    .title,.price{
        font-size: 12px;
        height: 20px;
        line-height: 20px;
    }

    .nav-select .price{
        color: #ff6700;
    }
    /*白色导航end*/






    #app .mi-breadcrumbs{
        width: 100%;
        height: 45px;
        background-color: rgb(245,245,245);
    }
    #app .mi-breadcrumbs .mi-container{
        margin: 0 18px;
        height: 40px;
        line-height: 40px;
        font-family: "宋体";
    }
    #app .mi-breadcrumbs .mi-container >a:hover{
        color: red;
    }
    #app .mi-service{
        margin-left: 15px;
    }
    #app .mi-service .mi-container .mi-fquestion .webfont{
        height: 106px;
        margin:30px 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30px;
    }

    #app .mi-service .mi-container .mi-fquestion .mi-fquestion-clearfix .mi-clearfixul{
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }
    #app .mi-service .mi-container .mi-fquestion .mi-fquestion-clearfix .mi-clearfixli{
        width: 296px;
        height: 277px;
        margin: 0 14px 18px 0;
        background-color: white;
    }
    #app .mi-service .mi-container .mi-fquestion .mi-fquestion-clearfix .mi-clearfixli:hover{
        transition-duration: 800ms;
        transform: translate(0,-10px);
        box-shadow: 0 5px 3px #dbdbdb;
    }
    #app .mi-service .mi-container .mi-fquestion .mi-fquestion-clearfix .mi-clearfixli::before{
    }
    #app .mi-service .mi-container .mi-fquestion .mi-fquestion-clearfix .mi-clearfixli>a{
        display: flex;
        flex-direction: column;
        align-items: center;

    }
    #app .mi-service .mi-container .mi-fquestion .mi-fquestion-clearfix .mi-clearfixli>a:hover{
        color: rgb(255,123,34);

    }
    #app .mi-service .mi-container .mi-fquestion .mi-fquestion-clearfix .mi-clearfixli>a>img{
        margin-top:76px;
    }
    #app .mi-service .mi-container .mi-fquestion .mi-fquestion-clearfix .mi-clearfixli>a>h3{
        font-weight: bolder;
        font-size: 18px;
        height: 46px;
        line-height: 46px;
    }
    #app .mi-service .mi-container .mi-fquestion .mi-fquestion-clearfix .mi-clearfixli>a>span{
        height: 14px;
        line-height: 14px;
    }
    #app .mi-service .mi-container .mi-center .webfont{
        height: 106px;
        margin:30px 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30px;
    }
    #app .mi-service .mi-container .mi-center .mi-center-clear{
        display: flex;
        width: 100%;
    }
    #app .mi-service .mi-container .mi-center .mi-center-clear .left{
        width: 614px;
        height: 360px;
    }
    #app .mi-service .mi-container .mi-center .mi-center-clear .right{
        display: flex;
        flex-direction: column;
        width: 100%;

    }
    #app .mi-service .mi-container .mi-center .mi-center-clear .right>p{
        height: 30px;
        font-weight: 500;
        font-size: 20px;
        margin-top: 64px;
        margin-bottom: 15px;
        display: flex;
        justify-content: center;
    }
    #app .mi-service .mi-container .mi-center .mi-center-clear .right>span{
        color: #615f5f;
        text-align: center;
        font-size: 16px;
    }
    #app .mi-service .mi-container .mi-center .mi-center-clear .right .mi-icon-wrap{
        display: flex;
        justify-content: space-around;
        margin: 24px 56px 10px 56px;
        color: #bababa;
        height: 91px;
    }
    #app .mi-service .mi-container .mi-center .mi-center-clear .right .mi-icon-wrap>dl{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #app .mi-service .mi-container .mi-center .mi-center-clear .right>a{
        margin: 15px auto;
        width: 158px;
        height: 38px;
        line-height: 38px;
        font-size: 17px;
        text-align: center;
        color: #bdbdbd;
    }
    #app .mi-service .mi-container .mi-center .mi-center-clear .right>a:hover{
        color: #f55f5f;
    }
    #app .mi-service .mi-container .mi-comquestion .webfont{
        height: 106px;
        margin:30px 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30px;
    }
    #app .mi-service .mi-container .mi-comquestion .search-wrap{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #app .mi-service .mi-container .mi-comquestion .search-wrap .search-wrap-1{
        display: flex;
        width: 646px;

    }
    #app .mi-service .mi-container .mi-comquestion .search-wrap .search-wrap-1 .search-form{
        display: flex;
    }
    #app .mi-service .mi-container .mi-comquestion .search-wrap .search-wrap-1 .search-form .search-content{
        text-align: left;
    }
    #app .mi-service .mi-container .mi-comquestion .search-wrap .search-wrap-1 .search-form .search-content{
        width: 567px;
        height: 48px;
        padding-left: 27px;
        padding-right: 52px;
        border-width: 0px;

    }
    #app .mi-service .mi-container .mi-comquestion .search-wrap .search-wrap-1 .search-form .search-btn{
        margin-left: -50px;
        width: 52px;
        height: 48px;
        background-color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }
    #app .mi-service .mi-container .mi-comquestion .search-wrap .search-wrap-1 .search-btn:hover{
        background-color: #e26302;
    }
    #app .mi-service .mi-container .mi-comquestion .search-wrap .search-tip{
        margin-top: 10px;
        margin-bottom: 12px;
        height: 18px;
        width: 646px;
        float: left;
        color: red;
        visibility: hidden;
    }
    #app .mi-service .mi-container .mi-comquestion .search-content{
        text-align: center;
        background-color: white;
    }
    #app .mi-service .mi-container .mi-comquestion .search-content>nav>ul{
        display: flex;
        justify-content: space-around;
        height: 67px;



    }
    #app .mi-service .mi-container .mi-comquestion .search-content>nav>ul>li{
        display:flex;
        margin: 0;
        height: 100%;
        width: 175.141px;
        align-items: center;
        justify-content: center;
        font-size: 18px;



    }
    /*#app .mi-service .mi-container .mi-comquestion .search-content>nav>ul>li:hover{*/
    /*    background-color: red;*/
    /*}*/
    #app .mi-service .mi-container .mi-comquestion .search-content>section{
        display: flex;
        height: 300px;
    }
    #app .mi-service .mi-container .mi-comquestion .search-content >div .tab{
        display: block;
        height: 190px;
        padding-top: 30px;
        padding-bottom: 16px;
        font-size: 15px;
    }
    #app .mi-service .mi-container .mi-comquestion .search-content >div .tab>ul{
        list-style-type: circle;
        height: 120px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;

    }
    #app .mi-service .mi-container .mi-comquestion .search-content >div .tab>ul>li{
        margin-left: 73.55px;
        width: 539.44px;
        height: 40px;
        display: flex;

    }
    #app .mi-service .mi-container .mi-comquestion .search-content >div .tab>ul>li>a:hover{
        color: rgb(255, 102, 0);
    }
    #app .mi-service .mi-container .mi-comquestion .search-content >div .tab>a:hover{
        color: #f15300;
    }
    #app #footer-iframe{
        margin-top: 200px;
    }


    /*侧边导航栏开始*/
    .side-banner{
        width: 84px;
        height: 452px;
        border: #f0f0f0 1px solid;
        top: 200px;
        right: 0;
        position: fixed;
    }
    .side-banner li{
        position: relative;
        display: block;
        width: 82px;
        height: 90px;
        margin-top: -1px;
        background-color: #fff;
        border: 1px solid #f5f5f5;
    }
    .side-banner i{
        display: inline-block;
        position: absolute;
        top:20px;
        left:26px;
        font-size: 30px;
    }
    .side-banner p{
        position: absolute;
        top: 55px;
        left: 18px;
        font-size: 14px;
    }

    .side-banner li:nth-child(1):hover>.show{
        display: block;
    }
    .show {
        width: 130px;
        height: 192px;

        background-color: white;
        position: absolute; /*不占据父元素位置，就不会撑开父元素 相对于父元素li  position: relative;*/
        /*水平居中对齐*/
        top: 0;
        right: 100px;
        /*阴影*/
        box-shadow: 0 1px 5px rgb(170, 170, 170); /*水平为0，垂直为1 模糊度5px*/
        /*设置内边距*/
        padding: 20px 20px;
        /*避免因为内边距撑大盒子*/

        justify-items: center;
        box-sizing: border-box;
        /*隐藏download*/
        display: none;
    }
    .show >img {
        width: 90px;
        height: 90px;

    }
    .font{
        margin: 70px 13px;
    }

    .side-banner li:hover {
        color: #FF6700;
        transition: all .5s;
        cursor: pointer;
    }
    /*侧边导航栏结束*/

</style>

<%--原来的html部分--%>
<!--黑色导航栏start-->
<div class="black-nav">
    <div class="wrap">
        <div class="black-nav-left">
            <ul>
                <li><a href="#">小米商城</a><span>|</span></li>
                <li><a href="#">MIUI</a><span>|</span></li>
                <li><a href="#">loT</a><span>|</span></li>
                <li><a href="#">云服务</a><span>|</span></li>
                <li><a href="#">金融</a><span>|</span></li>
                <li><a href="#">有品</a><span>|</span></li>
                <li><a href="#">小爱开放平台</a><span>|</span></li>
                <li><a href="#">企业团购</a><span>|</span></li>
                <li><a href="#">资质证照</a><span>|</span></li>
                <li><a href="#">协议规则</a><span>|</span></li>
                <li>
                    <a href="#">下载app</a><span>|</span>
                    <div class="download">
                        <img src="../../static/images/download.png" alt="">
                        <p>小米商城APP</p>
                    </div>
                </li>
                <li><a href="#">Select Location</a></li>
            </ul>
        </div>
        <div class="black-nav-right">
            <ul>
                <li><a href="#">登录</a><span>|</span></li>
                <li><a href="#">注册</a><span>|</span></li>
                <li class="shopping-car">
                    <a href="#">
                        <i class="iconfont icongouwuchekong"></i>购物车(0)
                    </a>
                    <div class="cart">购物车中还没有商品，赶紧选购吧！</div>
                </li>
            </ul>
        </div>
    </div>
</div>
<!--黑色导航栏end-->
<div id="app">

    <!--白色导航start-->
    <div class="white-nav">
        <div class="wrap">

            <a href="#"><img src="../../static/images/mi-logo.png" alt="" class="logo"></a>
            <!--            <a href="#"><img src="../../static/images/mi-logo.gif" alt="" class="logo2"></a>-->

            <ul>
                <li>
                    <a href="#">小米手机</a>
                    <div class="nav-select">
                        <ul>
                            <li>
                                <a href="#">
                                    <img src="../../static/images/p1.png" alt="">
                                    <p class="title">小米10 青春版 5G</p><!--用span行高不生效-->
                                    <p class="price">1899元起</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="../../static/images/p2.png" alt="">
                                    <p class="title">小米10 Pro</p>
                                    <p class="price">4999元起</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="../../static/images/p3.png" alt="">
                                    <p class="title">小米10</p>
                                    <p class="price">3799元起</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="../../static/images/p4.png" alt="">
                                    <p class="title">小米MIX Alpha</p>
                                    <p class="price">19999元起</p>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="#">Redmi红米</a>
                    <div class="nav-select">
                        <ul>
                            <li>
                                <a href="#">
                                    <img src="../../static/images/p5.jpg" alt="">
                                    <p class="title">Redmi 9A</p><!--用span行高不生效-->
                                    <p class="price">499元起</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="../../static/images/p6.png" alt="">
                                    <p class="title">Redmi 9</p>
                                    <p class="price">799元起</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="../../static/images/p7.png" alt="">
                                    <p class="title">Redmi 10X 4g</p>
                                    <p class="price">999元起</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="../../static/images/p8.png" alt="">
                                    <p class="title">Redmi 10X</p>
                                    <p class="price">1599元起</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="../../static/images/p9.jpg" alt="">
                                    <p class="title">Redmi K30 pro</p>
                                    <p class="price">2499元起</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="../../static/images/p10.jpg" alt="">
                                    <p class="title">Redmi K30</p>
                                    <p class="price">1399元起</p>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="#">电视</a>
                    <div class="nav-select">
                        <ul>
                            <li>
                                <a href="#">
                                    <img src="../../static/images/p11.png" alt="">
                                    <p class="title">小米电视 大师 65英寸OLED</p><!--用span行高不生效-->
                                    <p class="price">12999元起</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="../../static/images/p12.jpg" alt="">
                                    <p class="title">Redmi 智能电视 MAX 98''</p>
                                    <p class="price">19999元起</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="../../static/images/p13.png" alt="">
                                    <p class="title">小米电视4A 60英寸</p>
                                    <p class="price">1999元起</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="../../static/images/p14.png" alt="">
                                    <p class="title">Redmi 智能电视 X55</p>
                                    <p class="price">2166元起</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="../../static/images/p14.png" alt="">
                                    <p class="title">Redmi 红米电视 70英寸 R70A</p>
                                    <p class="price">2888元起</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="../../static/images/p14.png" alt="">
                                    <p class="title">小米壁画电视 65英寸</p>
                                    <p class="price">6999元起</p>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="#">笔记本</a>
                    <div class="nav-select">
                        <ul>
                            <li>
                                <a href="#">
                                    <img src="../../static/images/p15.png" alt="">
                                    <p class="title">RedmiBook 16</p><!--用span行高不生效-->
                                    <p class="price">4699元起</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="../../static/images/p16.png" alt="">
                                    <p class="title">RedmiBook 14 Ⅱ</p>
                                    <p class="price">4499元起</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="../../static/images/p17.png" alt="">
                                    <p class="title">Pro 15.6 2020款</p>
                                    <p class="price">5999元起</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="../../static/images/p18.png" alt="">
                                    <p class="title">小米笔记本Air 13.3</p>
                                    <p class="price">5499元起</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="../../static/images/p19.png" alt="">
                                    <p class="title">小米笔记本Air 13.3</p>
                                    <p class="price">6499元起</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="../../static/images/p20.png" alt="">
                                    <p class="title">显示器</p>
                                    <p class="price">2199元起</p>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="#">家电</a>
                    <div class="nav-select">
                        <ul>
                            <li>
                                <a href="#">
                                    <img src="../../static/images/p21.png" alt="">
                                    <p class="title">米家互联网空调C1（一级能效）</p><!--用span行高不生效-->
                                    <p class="price">1999元起</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="../../static/images/p22.png" alt="">
                                    <p class="title">米家互联网空调（一级能效）</p>
                                    <p class="price">9999元起</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="../../static/images/p23.jpg" alt="">
                                    <p class="title">Redmi全自动波轮洗衣机1A</p>
                                    <p class="price">8499元起</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="../../static/images/p24.png" alt="">
                                    <p class="title">米家互联网洗烘一体机10kg</p>
                                    <p class="price">2099元起</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="../../static/images/p25.jpg" alt="">
                                    <p class="title">米家风冷对开门冰箱 483L</p>
                                    <p class="price">2269元起</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="../../static/images/p26.jpg" alt="">
                                    <p class="title">米家两门冰箱 160L</p>
                                    <p class="price">9299元起</p>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="#">路由器</a>
                    <div class="nav-select">
                        <ul>
                            <li>
                                <a href="#">
                                    <img src="../../static/images/p27.png" alt="">
                                    <p class="title">Redmi路由器 AX5</p><!--用span行高不生效-->
                                    <p class="price">249元起</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="../../static/images/p28.png" alt="">
                                    <p class="title">小米路由器 AX1800</p>
                                    <p class="price">329元起</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="../../static/images/p29.png" alt="">
                                    <p class="title">小米AIoT路由器AX3600</p>
                                    <p class="price">599元起</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="../../static/images/p30.png" alt="">
                                    <p class="title">Redmi路由器AC2100</p>
                                    <p class="price">159元起</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="../../static/images/p31.png" alt="">
                                    <p class="title">小米路由器AC2100</p>
                                    <p class="price">199元起</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="../../static/images/p32.jpg" alt="">
                                    <p class="title">小米路由器 Mesh</p>
                                    <p class="price">799元起</p>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="#">智能硬件</a>
                    <div class="nav-select">
                        <ul>
                            <li>
                                <a href="#">
                                    <img src="../../static/images/p33.jpg" alt="">
                                    <p class="title">小米米家智能摄像机云台版</p><!--用span行高不生效-->
                                    <p class="price">179元起</p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="../../static/images/p34.jpg" alt="">
                                    <p class="title">小米小爱老师</p>
                                    <p class="price">399元起</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="../../static/images/p35.jpg" alt="">
                                    <p class="title">小米米家智能门锁</p>
                                    <p class="price">119元起</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="../../static/images/p36.png" alt="">
                                    <p class="title">Redmi小爱触屏音箱 8</p>
                                    <p class="price">3499元起</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="../../static/images/p37.jpg" alt="">
                                    <p class="title">小米小爱触屏音箱</p>
                                    <p class="price">119元起</p>
                                </a>
                            </li>
                            <li>
                                <a href="#"><img src="../../static/images/p38.png" alt="">
                                    <p class="title">Redmi小爱音箱 Play</p>
                                    <p class="price">79元起</p>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li><a href="#">服务</a></li>
                <li><a href="#">社区</a></li>



                <!--                    <div class="box">-->
                <!--                        <input type="text" placeholder="洗碗机">&lt;!&ndash;可改进&ndash;&gt;-->
                <!--                        <button><i class="iconfont iconziyuan"></i></button>-->
                <!--                    </div>-->

            </ul>
            <div class="box">
                <input type="text" placeholder="洗碗机"><!--可改进-->
                <button><i class="iconfont iconziyuan"></i></button>
            </div>
        </div>
    </div>
    <!--白色导航end-->

    <div class="mi-breadcrumbs"><!--第一行-->
        <div class="mi-container">
            <a href="../../homepage/code/homepage.html">首页</a>
            <span>/</span>
            <a href="">帮助中心</a>
        </div>
    </div>

    <div class="mi-service"><!--主体部分-->
        <div class="mi-container"><!--主体内容-->
            <div class="mi-lunbo">

                <div class="layui-carousel" id="test1" lay-filter="carofilter" style="font-size:larger">
                    <div carousel-item>
                        <div style=" padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a288241e6bda28cab3878baacceb9ecc.jpg?thumb=1&w=2452&h=500&f=webp&q=90"
                                                                                                             alt="" width="100%" height="100%"></div>
                        <div style=" padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82e48765b9bf97dfb5a993237e8f82a0.jpg?thumb=1&w=2452&h=500&f=webp&q=90"
                                                                                                             alt="" width="100%" height="100%"></div>
                        <div style=" padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/524f43e06f4722b1ff745402d7ad7cbb.jpg?thumb=1&w=2452&h=500&f=webp&q=90"
                                                                                                             alt="" width="100%" height="100%"></div>

                    </div>
                </div>

                <script>
                    layui.use('carousel', function () {
                        var carousel = layui.carousel;
                        //***************************建造实例
                        var ins=carousel.render({
                            elem: '#test1'
                            , width: '100%'     //设置容器宽度
                            //, height: '500px'
                            , arrow: 'none'    //始终显示箭头，可选hover,none
                            ,anim: 'default'    //切换动画方式，可选fade,default
                            , full: false        //全屏
                            , autoplay: true     //自动切换
                            , interval: 3000    //自动切换的时间间隔
                            , index: 3           //初始化时item索引,默认时0
                            , indicator:'inside' //指示器位置，可选outside,none
                        });

                        //**************************监听轮播切换事件
                        carousel.on('change(carofilter)', function (obj) { //test1来源于对应HTML容器的 lay-filter="test1" 属性值
                            console.log(obj.index);     //当前条目的索引
                            console.log(obj.prevIndex); //上一个条目的索引
                            console.log(obj.item);      //当前条目的元素对象
                        });

                        //****************************重置轮播
                        //var ins = carousel.render(options);
                        ins.reload({arrow:'none'});//将arror从alway变成hover
                    });
                </script>
            </div><!--轮播部分-->
            <div class="mi-fquestion"><!--自助服务-->
                <h2 class="webfont">自助服务</h2>
                <div class="mi-fquestion-clearfix"><!--展示部分-->

                    <ul class="mi-clearfixul">
                        <li class="mi-clearfixli"><a href="">

                            <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/cf177a3d11987a8a89fcf9737761fee4.png" alt="" width="66" height="66">
                            <h3>申请售后服务</h3>
                            <span>一键预约，快速维修</span>
                        </a></li>
                        <li class="mi-clearfixli"><a href="">
                            <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/b3d78ee5b7e581ff800867890d374856.png" alt="" width="66" height="66">
                            <h3>订单查询</h3>
                            <span>购物信息，快速查询</span>
                        </a></li>
                        <li class="mi-clearfixli"><a href="">
                            <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/9c468f3f48250ba18be586cddec59414.png" alt="" width="66" height="66">
                            <h3>小米账户</h3>
                            <span>重置密保，安全验证</span>
                        </a></li>
                        <li class="mi-clearfixli"><a href="">
                            <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/f894c0e7281d1c9e3aa5a038a37dc524.png" alt="" width="66" height="66">
                            <h3>保障服务</h3>
                            <span>碎片延保，双重保障</span>
                        </a></li>
                        <li class="mi-clearfixli"><a href="">
                            <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/b5fa66699ea9f680e4da98b159b7cfa4.png" alt="" width="66" height="66">
                            <h3>以旧换新</h3>
                            <span>便捷交易，价格保障</span>
                        </a></li>
                        <li class="mi-clearfixli"><a href="">
                            <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/da095cefe1f478177ad74eff3682d85a.png" alt="" width="66" height="66">
                            <h3>付费服务</h3>
                            <span>安装服务，手机维修</span>
                        </a></li>
                        <li class="mi-clearfixli"><a href="">
                            <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/74c16ff8dba7b08ffd72a4f5348751d6.png" alt="" width="66" height="66">
                            <h3>售后政策</h3>
                            <span>条款说明，安心保障</span>
                        </a></li>
                        <li class="mi-clearfixli"><a href="">
                            <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/ddd3107ebde416eabeb1491d27506225.png" alt="" width="66" height="66">
                            <h3>查询真伪</h3>
                            <span>辨别真伪，放心使用</span>
                        </a></li>
                    </ul>

                </div>

            </div><!--自助服务-->
            <div class="mi-center">
                <h2 class="webfont">服务中心</h2>
                <div class="mi-center-clear">
                    <div class="left"><img src="//i1.mifile.cn/f/i/2018/service/serviceCenter_img2.jpg" alt="" width="614px" height="360px"></div>
                    <div class="right">
                        <p>售后网点</p>
                        <span>小米售后，一站式为您提供售后服务。有售后，放心购是我们的服务宗旨。</span>
                        <div class="mi-icon-wrap">
                            <dl>
                                <dd><img src="//cdn.cnbj0.fds.api.mi-img.com/b2c-webfile/images/2018/service/serviceCenter_icon1.png" alt=""></dd>
                                <dt>预约服务</dt>
                            </dl>
                            <dl>
                                <dd><img src="//cdn.cnbj0.fds.api.mi-img.com/b2c-webfile/images/2018/service/serviceCenter_icon2.png" alt=""></dd>
                                <dt>1小时快修</dt>
                            </dl>
                            <dl>
                                <dd><img src="//cdn.cnbj0.fds.api.mi-img.com/b2c-webfile/images/2018/service/serviceCenter_icon3.png" alt=""></dd>
                                <dt>软件升级</dt>
                            </dl>
                            <dl>
                                <dd><img src="//cdn.cnbj0.fds.api.mi-img.com/b2c-webfile/images/2018/service/serviceCenter_icon4.png" alt=""></dd>
                                <dt>咨询体验</dt>
                            </dl>
                            <dl>
                                <dd><img src="//cdn.cnbj0.fds.api.mi-img.com/b2c-webfile/images/2018/service/serviceCenter_icon5.png" alt=""></dd>
                                <dt>面对面拆机</dt>
                            </dl>

                        </div>
                        <a href="//www.mi.com/static/maintainlocation">网点查询 ></a>
                    </div>
                </div>
            </div><!--服务中心-->
            <div class="mi-comquestion"><!--常见问题-->
                <h2 class="webfont">常见问题</h2>
                <div class="search-wrap">
                    <div class="search-wrap-1">

                        <form action="" class="search-form">
                            <input id="input" type="text" placeholder="请输入要搜索的内容" maxlength="50" class="search-content">
                            <a href="" class="search-btn" type="submit" ><i class="iconfont iconziyuan"></i></a>
                        </form>
                        <!--                        <script>-->
                        <!--                                $("#app .mi-comquestion .search-btn").click(function () {-->
                        <!--                                    if ($("#app .search-content").innerText == "") {-->
                        <!--                                        $("#app .search-tip").style.visibility="visible";-->

                        <!--                                        return false;-->
                        <!--                                    }-->

                        <!--                            });-->
                        <!--                        </script>-->

                        <!--                        <input type="text" placeholder="请输入要搜索的内容" maxlength="50" class="search-content" required>-->
                        <!--                        <a  class="search-btn" type="submit" ><i class="iconfont iconziyuan"></i></a>-->
                        <script>
                            $("#app .mi-comquestion .search-form .search-btn").click(function () {
                                var x1=document.getElementById("input")
                                var x2=x1.value;
                                if(x2==""){
                                    document.getElementById("search-tips").style.visibility="visible";
                                    return false;
                                }
                            })



                        </script>
                    </div>
                    <p id="search-tips" class="search-tip">搜索内容不能为空</p>
                </div><!--搜索栏-->
                <div class="search-content"><!--选项卡-->
                    <!--导航栏部分HTML代码-->
                    <nav id="nav">
                        <ul>
                            <li class="act">账户管理</li>
                            <li>购物指南</li>
                            <li>订单相关</li>
                            <li>售后服务</li>
                            <li>特色服务</li>
                            <li>其他产品咨询</li>
                            <li>线下销售渠道</li>
                        </ul>
                    </nav>
                    <!--内容部分HTML代码-->
                    <div id="container">
                        <section class="tab" style="">
                            <ul>
                                <li><a href="">小米账户如何注册？</a></li>
                                <li><a href="">手机如何申诉解锁？</a></li>
                                <li><a href="">什么是账号申诉重置密码保护？</a></li>
                                <li><a href="">如何进行重置密码保护？</a></li>
                                <li><a href="">小米账号忘记密码如何找回？</a></li>
                                <li><a href="">如何认证小米社区VIP？</a></li>
                            </ul>
                            <a href="http://www.mi.com/service/buy/SalesTime">查看更多 ></a>
                        </section>
                        <section class="tab" style="">
                            <ul>
                                <li><a href="">缺货的商品什么时间能下单购买？</a></li>
                                <li><a href="">为什么订单满99元还要支付快递费用？</a></li>
                                <li><a href="">活动时赠送的产品可选吗？</a></li>
                                <li><a href="">下单后多长时间发货？</a></li>
                                <li><a href="">小米商城支持什么方式支付</a></li>
                                <li><a href="">为什么购物车显示有货，去结算时无货？</a></li>
                            </ul>
                            <a href="http://www.mi.com/service/buy/SalesTime">查看更多 ></a>
                        </section>
                        <section class="tab" style="">
                            <ul>
                                <li><a href="">如何修改订单发票？</a></li>
                                <li><a href="">如何修改订单？</a></li>
                                <li><a href="">如何取消订单？</a></li>
                                <li><a href="">优惠卷如何使用？</a></li>
                                <li><a href="">如何查询物流信息？</a></li>
                                <li><a href="">小米产品如何辨别真伪？</a></li>
                            </ul>
                            <a href="http://www.mi.com/service/buy/SalesTime">查看更多 ></a>
                        </section>
                        <section class="tab" style=""><ul>
                            <li><a href="">如何查询维修网点？</a></li>
                            <li><a href="">小米售后服务政策？</a></li>
                            <li><a href="">取消订单/退货后如何退款？</a></li>
                            <li><a href="">在小米商品购买商品如何申请售后？</a></li>
                            <li><a href="">如何查询售后进度？</a></li>
                            <li><a href="">维修价格查询？</a></li>
                        </ul>
                            <a href="http://www.mi.com/service/buy/SalesTime">查看更多 ></a>
                        </section>
                        <section class="tab" style="">
                            <ul>
                                <li><a href="">电视挂件安装收费标准</a></li>
                                <li><a href="">如何以旧换新</a></li>
                                <li><a href="">以旧换新常见问题</a></li>
                                <li><a href="">如何登录小米云服务</a></li>
                                <li><a href="">如何购买手机上门维修</a></li>
                                <li><a href="">米家互联网空调如何安装及收费标准</a></li>
                            </ul>
                            <a href="http://www.mi.com/service/buy/SalesTime">查看更多 ></a>
                        </section>
                        <section class="tab" style="">
                            <ul>
                                <li><a href="">小米钱包账户问题</a></li>
                                <li><a href="">理财相关问题</a></li>
                                <li><a href="">小米分期相关问题</a></li>
                                <li><a href="">米粉卡相关问题</a></li>
                                <li><a href="">全球上网相关问题</a></li>
                                <li><a href="">对小米有意见或建议怎么办？</a></li>
                            </ul>
                            <a href="http://www.mi.com/service/buy/SalesTime">查看更多 ></a>
                        </section>
                        <section class="tab" style="">
                            <ul>
                                <li><a href="">小米之家功能介绍</a></li>
                                <li><a href="">如何查询您身边的小米之家</a></li>
                                <li><a href="">什么是小米授权体验店</a></li>
                                <li><a href="">如何查询小米授权体验店</a></li>
                                <li><a href="">如何查询小米KA门店（大型连锁卖场）</a></li>
                                <li><a href="">如何查询小米小店</a></li>
                            </ul>
                            <a href="http://www.mi.com/service/buy/SalesTime">查看更多 ></a>
                        </section>
                    </div>

                </div>
            </div><!--常见问题-->

        </div>
    </div>

</div>
<!--侧边导航栏开始-->
<div class="side-banner">
    <ul>
        <li>
            <i class="iconfont icon-shouji"></i>
            <p>手机app</p>
            <div class="show">
                <img src="../../static/images/download.png" alt="">
                <p class="font">扫码领取新</br>人百元红包</p>
            </div>
            <p>手机app</p>
        </li>
        <li>
            <i class="iconfont icon-gerenzhongxin"></i>
            <p>个人中心</p>
        </li>
        <li>
            <i class="iconfont icon-banshou"></i>
            <p>售后服务</p>
        </li>
        <li>
            <i class="iconfont icon-service"></i>
            <p>人工服务</p>
        </li>
        <li>
            <i class="iconfont icon-gouwuchekong"></i>
            <p>购物车</p>
        </li>
    </ul>
</div>
<!--侧边导航栏结束-->

<%--html部分结束--%>

<%--js部分--%>
<script>
    window.onload=function () {
        function setIframeHeight(iframe) {
            if (iframe) {
                var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
                if (iframeWin.document.body) {
                    iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
                }
            }
        };
        setIframeHeight(document.getElementById('footer-iframe'));
        //获取 li 也就是选项卡选项tab
        var nav=document.getElementById('nav');
        var oNav=nav.getElementsByTagName('li');
        //获取 包裹在container里面的section（内容）
        var container=document.getElementById('container');
        var oDiv=container.getElementsByClassName('tab');
        //使用 循环依次得到li
        for(var i=0;i<oNav.length;i++){
            oNav[i].index=i;
            //每一次得到li后执行鼠标点击操作则触发函数function
            oNav[i].onmouseover=function () { //此处除了可以使用onclick，还可以使用onmouseover
                //在li的个数内依次展示内容

                for(var i=0;i<oNav.length;i++){
                    oNav[i].className='';
                    oDiv[i].style.display="none";
                    if(i!=this){
                        oNav[i].style.backgroundColor="white";
                    }
                }
                this.style.backgroundColor="rgb(255,102,0)";
                this.className='act';
                oDiv[this.index].style.display="block"

            }
            for(var m=1;m<oNav.length;m++){
                oNav[m].className='';
                oDiv[m].style.display="none";
            }
        }
    };
</script>

</body>
</html>
